<template>
  <div class="vol_meeting">
    <base-search placeholder="请输入会议名称搜索" @search="clickSearch"></base-search>
    <div class="vol_meeting_list">
      <div v-if="params.loading && !params.list.length">
        <ListSkeleton class="mb-3"></ListSkeleton>
        <ListSkeleton class="mb-3"></ListSkeleton>
      </div>
      <van-list
        v-if="params.list.length || !params.loading"
        v-model:loading="params.loading"
        :finished="params.list.length >= params.total"
        @load="loadMore"
      >
        <van-empty v-if="!params.list.length" description="暂无会议" />
        <list-item
          v-for="item in params.list"
          :key="item.id"
          :item="item"
          @refresh="init"
        ></list-item>
      </van-list>
    </div>

    <div class="apply_meeting_btn">
      <div class="apply_meeting_btn_main">
        <van-button type="primary" size="small" block @click="clickApply">申请会议</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import ListItem from './components/list-item.vue'
import ListSkeleton from './components/skeleton.vue'
import { inject } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter();
const api = inject('api');
const params = reactive({
  loading: true,
  page: 1,
  limit: 10,
  list: [],
  meetingName: '',
  total: 0
})

const load = async () => {
  try {
    params.loading = true
    const res = await api.meetingList({
      limit: params.limit,
      page: params.page,
      meetingName: params.meetingName
    })

    params.loading = false

    if (!res.code) {
      params.total = res.data.total
      if (params.page == 1) {
        params.list = res.data.list
      } else {
        params.list = [...params.list, ...res.data.list]
      }
    }
  } catch(err) {
    params.loading = false
  }
}

function loadMore () {
  if (params.list.length < params.total) {
    params.page ++;
    load()
  }
}

function clickApply() {
  router.push('/vol/apply-meeting')
}

function init () {
  params.page = 1
  load();
}
function clickSearch (val) {
  params.meetingName = val
  init();
}

onMounted(() => {
  init();
})
</script>

<style scoped>
.vol_meeting {
  padding-bottom: 200px;
}
.apply_meeting_btn {
  position: fixed;
  bottom: 100px;
  width: 100%;
  box-sizing: border-box;
}
.apply_meeting_btn_main {
  width: 50%;
  margin: 0 auto;
}
</style>